<template>
    <div class="grid-wrap" :style="{ '--cols': cols }">
      <!-- 新增卡片 -->
      <div class="card add-card" @click="$emit('add')">
        <el-icon><Plus /></el-icon>
        <div class="add-text">新增子节点</div>
      </div>
  
      <!-- 子项卡片 -->
      <div v-for="it in items" :key="it.id" class="card item-card">
        <div class="card-hd">
          <div class="left">
            <el-tag size="small" type="info" v-if="it.code">{{ it.code }}</el-tag>
            <span class="name" :title="it.name">{{ it.name }}</span>
          </div>
          <div class="right">
            <el-tag size="small" effect="plain">{{ typeLabel(it.nodeType || it.type) }}</el-tag>
          </div>
        </div>
  
        <div class="card-body">
          <div class="kv"><span class="k">父级：</span><span class="v">{{ parentNameOf(it.pid ?? it.parentId) }}</span></div>
          <div class="kv"><span class="k">路径：</span><span class="v path">{{ fullPathOf(it.id) }}</span></div>
          <div class="kv"><span class="k">备件：</span><span class="v">{{ it.spareInfo?.name || '-' }}</span></div>
          <div class="kv"><span class="k">更新时间：</span><span class="v">{{ it.updateTime || '-' }}</span></div>
        </div>
  
        <div class="card-actions">
          <el-button size="small" type="primary" link @click="$emit('edit', it)">
            修改
          </el-button>
          <el-button size="small" type="danger"  link @click="$emit('remove', it)">
            删除
          </el-button>
        </div>
      </div>
    </div>
  </template>
  
  <script setup>
  import { Plus } from '@element-plus/icons-vue'
  
  const props = defineProps({
    items: { type: Array, default: () => [] },
    cols: { type: Number, default: 2 },
    // 下面三个方法由父组件透传，保证与父页面保持同一套“路径/父名”计算
    fullPathOf: { type: Function, required: true },
    parentNameOf: { type: Function, required: true },
    typeLabel: { type: Function, required: true },
  })
  defineEmits(['add','edit','remove'])
  </script>
  
  <style scoped>
  .grid-wrap{
    display:grid;
    grid-template-columns: repeat(var(--cols), minmax(0,1fr));
    gap:12px;
  }
  @media (max-width: 960px){ .grid-wrap{ --cols:1; } }
  
  .card{
    border:1px solid #e5e7eb;
    border-radius:12px;
    background:#fff;
    padding:12px;
    box-shadow: 0 4px 14px rgba(0,0,0,.06);
  }
  
  /* 新增卡片 */
  .add-card{
    display:grid; place-items:center;
    color:#3e8cf0; cursor:pointer;
    min-height:120px;
    transition: transform .12s ease, background .12s ease;
  }
  .add-card:hover{ transform: translateY(-1px); background:#f5f8ff; }
  .add-text{ margin-top:6px; font-weight:600; }
  
  /* 子项卡片 */
  .item-card .card-hd{
    display:flex; align-items:center; justify-content:space-between;
    gap:8px; margin-bottom:8px;
  }
  .item-card .left{ display:inline-flex; align-items:center; gap:6px; min-width:0; }
  .item-card .name{ font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  
  .card-body{ display:grid; gap:4px; }
  .kv .k{ color:#909399; }
  .kv .v{ color:#303133; }
  .kv .path{ word-break: break-all; }
  
  .card-actions{
    display:flex; gap:8px; margin-top:8px;
    border-top:1px dashed #eef2f6; padding-top:8px;
  }
  </style>
  